<template>

  <div style="padding:30px">
    <el-form :inline="true">
      <el-form-item label="日期">
        <el-date-picker
          v-model="dateRange"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="doSearch()">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-col :lg="24">

        <div id="myChart" :style="{width: '1300px', height: '300px'}"></div>
      </el-col>

    </el-row>
    <el-row style="margin-bottom:15px">
      <el-form :inline="true">
        <el-form-item label="日期">
          <el-date-picker
            v-model="inqdateRange"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="doSearch1()">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row>
      <el-col :lg="24">

        <div id="myChart1" :style="{width: '1300px', height: '300px'}"></div>
      </el-col>

    </el-row>
  </div>

</template>

<script>
  // import {monthCompanyStatic,monthDriverStatic} from '@/api/tws/statistics'
  import {getToken, getExpiresIn, setExpiresIn} from '@/utils/auth'
  import macarons from "echarts/theme/macarons"
  export default {
    name: 'Index',

    data() {
      return {
        orderDays: [],
        driverCount: [],
        selectDate: '',
        range: [],
        current_month: [],
        inqdateRange: '',
        dateRange: '',
        startDate: '',
        endDate: '',
        inqstartDate: '',
        inqendDate: '',
        daysArr: [],
        sexStatic: [],
        showSexStatistic: [],
        memberStatic: [],
        memberDay: [],
        companyCount: [],
        orderStatic: [],
        orderDay: [],
        //orderCount: [],
        activeName: 'all',
        activeName2: 'all',
        pickerOptions: {
          onPick: ({maxDate, minDate}) => {
            this.selectDate = minDate.getTime();
            if (maxDate) {
              this.selectDate = ''
            }
          }, disabledDate: (time) => {
            if (this.selectDate !== '') {
              const one = 30 * 24 * 3600 * 1000;
              const minTime = this.selectDate - one;
              const maxTime = this.selectDate + one;
              return time.getTime() < minTime || time.getTime() > maxTime
            }
          }
        }

      }
    },
    mounted() {
      // this.getDays();
      // this.companyEcharts();
      // this.driverEcharts();
      // this.getNowM();
    },
    created() {
    },
    methods: {

      companyEcharts(startDate, endDate) {
        var _that = this;
        monthCompanyStatic(startDate, endDate).then(res => {
          this.memberStatic = res;
          this.current_month.forEach(item => {
            let dict = this.memberStatic.find(ele => ele.objectName == item);
            _that.memberDay.push(item)

            if (this.duibi(item, this.formatDate(new Date()))) {
              _that.companyCount.push(null);
            } else {
              _that.companyCount.push(dict == null ? 0 : dict.amount);
            }

          })

          // 基于准备好的dom，初始化echarts实例
          var myChart = this.$echarts.init(document.getElementById('myChart'),'macarons');
          // 指定图表的配置项和数据
          var option = {
            title: {
              text: '货源方数量统计'
            },
            grid: {
              left: '50',
            },
            tooltip: {},
            legend: {
              data: ['日期']
            },
            xAxis: {
              data: this.current_month
            },
            yAxis: {},
            series: [{
              name: '货源方数量',
              type: 'line',
              smooth: true,
              data: this.companyCount
            }]
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        })
      },


      driverEcharts(startDate, endDate) {
        var _that = this;
        monthDriverStatic(startDate, endDate).then(res => {
          this.memberStatic = res;
          this.current_month.forEach(item => {
            let dict = this.memberStatic.find(ele => ele.objectName == item);
            _that.memberDay.push(item)

            if (this.duibi(item, this.formatDate(new Date()))) {
              _that.driverCount.push(null);
            } else {
              _that.driverCount.push(dict == null ? 0 : dict.amount);
            }

          })

          // 基于准备好的dom，初始化echarts实例
          var myChart = this.$echarts.init(document.getElementById('myChart1'),'macarons');
          // 指定图表的配置项和数据
          var option = {
            title: {
              text: '司机数量统计'
            },
            tooltip: {},
            grid: {
              left: '50',
            },
            legend: {
              data: ['日期']
            },
            xAxis: {
              data: this.orderDays
            },
            yAxis: {},
            series: [{
              name: '司机数量',
              type: 'line',
              //smooth: true,
              data: this.driverCount
            }]
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        })
      },
      handleSetLineChartData(type) {
        this.lineChartData = lineChartData[type]
      },
      //获取7天日期
      getDays() {
        for (let i = 0; i < 7; i++) {
          const time = new Date(new Date().setDate(new Date().getDate() + i - 7));
          const year = time.getFullYear();
          const month = `0${time.getMonth() + 1}`.slice(-2);
          const strDate = `0${time.getDate()}`.slice(-2);
          this.daysArr.push(`${year}-${month}-${strDate}`);
        }
      }
      ,
      //格式化时间
      formatDate(date) {
        date = new Date(date);
        let myyear = date.getFullYear();
        let mymonth = date.getMonth() + 1;
        let myweekday = date.getDate();
        mymonth < 10 ? mymonth = "0" + mymonth : mymonth;
        myweekday < 10 ? myweekday = "0" + myweekday : myweekday;
        return `${myyear}-${mymonth}-${myweekday}`;
      },

// 获取当前月的天数
      mGetDate() {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var d = new Date(year, month, 0);
        return d.getDate();
      },
// 获取当前月的所有日期
      getNowM(e) {
        let now = new Date();
        let current_month_num = this.mGetDate();
        let current_month = [];
        for (let i = 1; i <= current_month_num; i++) {
          let day = now.setDate(i);
          let everyDay = this.formatDate(day);
          this.current_month.push(everyDay);
          this.orderDays.push(everyDay);
        }

      },

      doSearch() {
        this.companyCount=[];
        if (this.dateRange.length == 0) {
          this.$message({
            message: '请输入查询日期',
            type: 'warning'
          });
          return;
        }
        // this.range = this.dateRange.split(',')
        this.startDate = this.dateRange[0];
        this.endDate = this.dateRange[1];
        this.getDateBetween(this.startDate, this.endDate)

        this.companyEcharts(this.startDate, this.endDate)
      },

      doSearch1() {
        this.driverCount = [];
        if (this.inqdateRange.length == 0) {
          this.$message({
            message: '请输入查询日期',
            type: 'warning'
          });
          return;
        }
        // this.range = this.dateRange.split(',')
        this.inqstartDate = this.inqdateRange[0];
        this.inqendDate = this.inqdateRange[1];
        this.getinqDateBetween(this.inqstartDate, this.inqendDate)

        this.driverEcharts(this.inqstartDate, this.inqendDate)
      },
      getDateBetween(start, end) {
        this.current_month = [];
        //使用传入参数的时间
        var startTime = new Date(start);
        var endTime = new Date(end);
        while (endTime - startTime >= 0) {
          let year = startTime.getFullYear();
          let month = startTime.getMonth();
          month = month < 9 ? '0' + (month + 1) : month + 1;
          let day = startTime.getDate().toString().length == 1 ? "0" + startTime.getDate() : startTime.getDate();
          //加入数组
          this.current_month.push(year + "-" + month + "-" + day);
          //更新日期
          startTime.setDate(startTime.getDate() + 1);
        }

      },
      getinqDateBetween(start, end) {
        this.orderDays = [];
        //使用传入参数的时间
        var startTime = new Date(start);
        var endTime = new Date(end);
        while (endTime - startTime >= 0) {
          let year = startTime.getFullYear();
          let month = startTime.getMonth();
          month = month < 9 ? '0' + (month + 1) : month + 1;
          let day = startTime.getDate().toString().length == 1 ? "0" + startTime.getDate() : startTime.getDate();
          //加入数组
          this.orderDays.push(year + "-" + month + "-" + day);
          //更新日期
          startTime.setDate(startTime.getDate() + 1);
        }

      },
      reset() {
        this.companyCount = [];
        this.driverCount = [];
      },
      duibi(a, b) {
        var arr = a.split("-");
        var starttime = new Date(arr[0], arr[1], arr[2]);
        var starttimes = starttime.getTime();

        var arrs = b.split("-");
        var lktime = new Date(arrs[0], arrs[1], arrs[2]);
        var lktimes = lktime.getTime();

        if (starttimes >= lktimes) {

          return true;
        }
        else
          return false;
      }
    }
  }
</script>

<style lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    position: relative;

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }

  @media (max-width: 1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
</style>
